<template>
    <div class="home">
        <div class="left">
            <leftOne :title="'行业资产分布'"></leftOne>
            <leftTwo :title="'投资机构分布'"></leftTwo>
            <leftThree :title="'投资项目分布'"></leftThree>
        </div>
        <div class="center">
            <!-- <div class="home-center">
                <div class="home-center-left">
                    <centerItem v-for="item in centerLeft" :imgSrc="item.imgSrc" :title="item.title" :num="item.num"
                        :left="item.left" :top="item.top">
                    </centerItem>
                </div>
                <div class="home-center-right">
                    <centerItem v-for="item in centerRight" :imgSrc="item.imgSrc" :title="item.title" :num="item.num"
                        :right="item.right" :top="item.top" :scaleX="item.scaleX">
                    </centerItem>
                </div>
                
            </div> -->
            <centerSvg></centerSvg>
        </div>
        <div class="right">
            <rightOne :title="'投资规模趋势'" :scaleX="-1"></rightOne>
            <rightTwo :title="'投资项目进展'" :scaleX="-1"></rightTwo>
            <rightThree :title="'行业资产TOP3'" :scaleX="-1"></rightThree>
        </div>
    </div>
</template>

<script setup lang="ts">
// 使用 script setup 语法
import centerItem from '@/components/centerItem.vue';
import rightOne from '@/components/homeCom/rightOne.vue';
import rightTwo from '@/components/homeCom/rightTwo.vue';
import rightThree from '@/components/homeCom/rightThree.vue';
import leftOne from '@/components/homeCom/leftOne.vue';
import leftTwo from '@/components/homeCom/leftTwo.vue';
import leftThree from '@/components/homeCom/leftThree.vue';
import centerSvg from '@/components/centerSvg.vue';
import * as echarts from 'echarts';
import { ref } from 'vue';
const centerLeft = ref([
    {
        imgSrc: '/homePageImg/d1-1.png',
        title: '资产总额',
        num: 908,
        left: 10,
        top: 20
    },
    {
        imgSrc: '/homePageImg/d1-2.png',
        title: '利润额度',
        num: 1448,
        left: 0,
        top: 35
    },
    {
        imgSrc: '/homePageImg/d1-3.png',
        title: '营业收入',
        left: 0,
        num: 2932,
        top: 50
    },
    {
        imgSrc: '/homePageImg/d1-4.png',
        title: '职业人数',
        left: 10,
        num: 2136,
        top: 65
    }
])
const centerRight = ref([
    {
        imgSrc: '/homePageImg/d1-5.png',
        title: '所有者权益',
        num: 2078,
        right: 10,
        top: 20,
        scaleX: -1
    },
    {
        imgSrc: '/homePageImg/d1-6.png',
        title: '负债总额',
        num: 1448,
        right: 0,
        top: 35,
        scaleX: -1
    },
    {
        imgSrc: '/homePageImg/d1-7.png',
        title: '研发经费',
        num: 1912,
        top: 50,
        right: 0,
        scaleX: -1
    },
    {
        imgSrc: '/homePageImg/d1-8.png',
        title: '已交税费',
        num: 2136,
        right: 10,
        top: 66,
        scaleX: -1
    }
])
</script>

<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;
    display: flex;
    // flex-direction: column;

    .center {
        flex: 1;
        // background: url(/static/img/homeCenter.png) no-repeat center center;
        background-size: 100% 80%;
        position: relative;
        display: flex;
        flex-wrap: nowrap
    }

    .left,
    .right {
        height: 100%;
        width: 28%;
        display: flex;
        flex-direction: column;

        .left>div,
        .right>div {
            flex: 1;
        }
    }
}
</style>